<template>
  <section
    id="saleCounts"
    class="dashboard"
  />
</template>
<script lang="ts">
import { defineComponent, onMounted, nextTick } from 'vue';

import { init } from 'echarts';

import type { EChartsOption } from 'echarts';

export default defineComponent({
  setup() {
    const createChart = () => {
      const saleCountsChart = init(document.getElementById('saleCounts') as HTMLDivElement);
      const option: EChartsOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: 30,
          left: 50,
          right: 10,
          bottom: 30,
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [845, 806, 470, 809, 865, 434, 545, 906, 488, 321, 890, 919],
            type: 'bar',
            barWidth: '46%',
            itemStyle: {
              color: '#007af5',
            },
          }
        ],
      };

      saleCountsChart.setOption(option);
      window.addEventListener('resize', () => {
        saleCountsChart.resize();
      });
    };
    onMounted(() => {
      nextTick(() => {
        createChart();
      });
    });
  },
});
</script>
<style lang="scss" scoped>
.dashboard {
  display: flex;
  flex: 1;
  align-items: flex-end;
  height: 300px;
}
</style>
